a =false
var className;
let control_icon =  $get('controlsBox').querySelectorAll(".control_icon")
if(!a){
    className = "control_icon1"
    control_icon[0].classList.add("control_icon1")
    control_icon[1].classList.add("control_icon1")
}else{
    className = "control_icon2"
    control_icon[0].classList.add("control_icon2")
    control_icon[1].classList.add("control_icon2")
}
render(a)

/* ~~~~~~~~~~~~~~~~~~~~~~ 获取DOM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
var videoBox = $get('video_box');
var controlsBox = $get('controlsBox');
var video = $get('videoPlayer')
var useShear = $get('useShear')
var userFocus1_add = $get('userFocus1_add')
var userFocus1_cancel = $get('userFocus1_cancel')
var useVideo = $get('useVideo')
var userFocus2_add = $get('userFocus2_add')
var userFocus2_cancel = $get('userFocus2_cancel')
var useFullScreen = $get('useFullScreen')
var videoFailed = $get("video_failed")
var move_left = $get('move_left')
var move_right = $get('move_right')
var move_top = $get('move_top')
var move_bottom = $get('move_bottom')
var controlIcon = document.querySelectorAll(".control_icon")
var fullScreenFlag = false
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
function render(flag){
    console.log(flag);
    if(flag){
        datalist = img_path
    }else{
        datalist = img_path.filter(item=> item.id == 1)
    }
    //d当id为1时需要全部的按键，不为1时则只需要切图、全屏、两个聚焦
        var htmltext_left = ``
        var htmltext_right = ``
        datalist.forEach((item,index) => {
            if(index<=datalist.length / 2 - 1){
                htmltext_left += `
                    <span style="display:${item.flag}">
                    <img src=${item.src} alt='${item.name}'  class="${item.className}">
                    </span>
                ` 
            }else{
                htmltext_right += `
                    <span style="display:${item.flag}">
                    <img src=${item.src} alt='${item.name}'  class="${item.className}">
                    </span>
                ` 
            }
  
        })
        console.log(document.querySelectorAll(".control_icon"),111);
        console.log(className,222);
        document.querySelectorAll(`.${className}`)[0].innerHTML = htmltext_left
        document.querySelectorAll(`.${className}`)[1].innerHTML = htmltext_right
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
function $get(className) {
    return document.querySelector('.' + className)
}

function closeCustom() {
    controlsBox.classList.remove('fade-up')
    controlsBox.classList.add('fade-out')
}

function openCustom() {
    controlsBox.classList.remove('fade-out')
    controlsBox.classList.add('fade-up')
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

video.addEventListener('loadedmetadata', function () {
    console.log('视频的元数据已经加载完成');
    videoFailed.style.display = "none"
});
video.addEventListener('error', function (e) {
    console.error('视频加载出错', e);
    videoFailed.style.display = "inline-block"
});

//窗口状态：当检测到鼠标滑入video时 +0.3s的淡出动画
videoBox.addEventListener('mouseover', function (event) {
    openCustom()
});
//窗口状态：当检测到鼠标滑出video时 +0.3s的淡出动画
videoBox.addEventListener('mouseleave', function () {
    closeCustom()
});
video.addEventListener("contextmenu", function (event) {
    event.stopPropagation()
    event.preventDefault()
})
//全屏时修改 “controlsBox” css定位，并解除鼠标滑入滑出函数
useFullScreen.addEventListener('click', function () {
    fullScreenFlag = !fullScreenFlag
    if (fullScreenFlag) {
        if (videoBox.requestFullscreen) {
            video.classList.add("fullScreen")
            if(!a){  //当只有四个标签的时候
                // controlIcon[0].classList.remove("control_icon")
                // controlIcon[1].classList.add("center_icon")
            }else{  //全部标签
                controlIcon[0].classList.remove("control_icon2")
                controlIcon[1].classList.remove("control_icon2")
                controlIcon[0].classList.add("center_icon")
                controlIcon[1].classList.add("center_icon")

            }

            videoBox.requestFullscreen()
            $get('controlsBox').querySelectorAll("img").forEach(item => {
                item.style.width = '36px'
                item.style.height = '36px'
            })
        }
    } else {
        video.classList.remove("fullScreen")
        if(!a){
            // controlIcon[0].classList.remove("center_icon")
            // controlIcon[1].classList.add("control_icon")
        }else{
            controlIcon[0].classList.remove("center_icon")
            controlIcon[1].classList.remove("center_icon")

            controlIcon[1].classList.add("control_icon2")
            controlIcon[0].classList.add("control_icon2")
        }
        
        document.exitFullscreen()
        $get('controlsBox').querySelectorAll("img").forEach(item => {
            item.style.width = '24px'
            item.style.height = '24px'
        })
    }
})

/* ~~~~~~~~~~~~~~~~~~~~~~控件的事件监听~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
useShear.addEventListener('click', function () {
    console.log('click ready');
});
userFocus1_add.addEventListener('click', function () {
    console.log('click ready');
});
userFocus1_cancel.addEventListener('click', function () {
    console.log('click ready');
});
userFocus2_add.addEventListener('click', function () {
    console.log('click ready');
});
userFocus2_cancel.addEventListener('click', function () {
    console.log('click ready');
});
//视频录制
var video_flag = false;
useVideo.addEventListener('click', function () {

    if (video_flag) {
        video_flag = false
        console.log("录制结束");
    } else {
        video_flag = true
        console.log('录制开始');
    }
    console.log('click ready');
});

move_left.addEventListener('click', function () {
    console.log('click ready');
});
move_right.addEventListener('click', function () {
    console.log('click ready');
});
move_top.addEventListener('click', function () {
    console.log('click ready');
});
move_bottom.addEventListener('click', function () {
    console.log('click ready');
});